<template>
    <div class="goods">
        <div style="float: left;height: 66px;" class="box">
            <input type="checkbox" :ref="'id'+id" :checked="state" @change="updateState">
        </div>
        <!--<div style="height: 66px;" @click="choose">-->
        <div style="height: 66px;">
            商品名称：{{title}}<br/>
            商品简介：{{desc}}<br/>
            商品价格：{{price}}
            <Counter :count="count" :id="id"></Counter>
        </div>
    </div>
</template>

<script>
    import Counter from '@/components/Counter/Counter.vue';
    export default {
        name: "Goods",
        props: {
            'title': {
                type: String,
                required: true
            },
            'desc': {
                type: String,
                default: '',
            },
            'price':{
                type: Number,
                required:true
            },
            'id':{
                type:String,
                required:true
            },
            state:{
                type:Boolean,
                default:true,
            },
            count:{
                type:Number,
                required:true
            }
        },
        methods: {
            choose() {
                this.$refs['id' + this.id].checked = !this.$refs['id' + this.id].checked;
                this.updateState();
            },
            updateState(){
                this.$emit('updateState',this.id,this.$refs['id'+this.id].checked);
            }
        },
        components:{
            Counter
        }
    }
</script>

<style scoped>
    .goods {
        background-color: #5bc0de;
        margin-bottom: 5px;
        text-align: left;
        height: 75px;
    }

    .box {
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>